<template>
  <!-- 容器 -->
  <div ref="line" class="charts"></div>
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    mounted() {
      let charts = echarts.init(this.$refs.line)
      charts.setOption({
        // 隐藏x轴
        xAxis: {
          show: false,
          // 最小值与最大值的设置
          min:0,
          max:100
        },
        // 隐藏y轴
        yAxis: {
          show: false,
          // 添加折线节点(均分)
          type: 'category',
        },
        series: [{
          // 图表类型
          type: 'bar',
          // 图表数据
          data: ['10'],
          // 
          color:'cyan',
          // 柱状图的宽度
          barWidth:10,
          color:'yellowgreen',
          // 背景颜色开启
          showBackground:true,
          // 设置背景颜色
          backgroundStyle:{
            color:'#eee'
          },
          // 文本标签
          label:{
            show:true,
            // 改变文本内容
            formatter:'|',
            // 文本标签位置
            position:'right'
          }
        }],
        // 画板布局
        grid: {
          top: 0,
          right: 0,
          bottom: 0,
          left: 0
        },
      })
    }
  }
</script>

<style scoped>
  .charts {
    width: 100%;
    height: 70px;
  }
</style>
